<template>
  <!-- 预警决策主页-十八项反措立体柱图-满足部分 -->
  <div class="eighteenbar">
    <div ref="homepagemapinfo"></div>
    <!-- <v-chart :options="newOption" :auto-resize="true" /> -->
  </div>
</template>

<script lang="ts">
import "echarts-gl";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { EChartOption } from "echarts";
import echarts from "echarts";
//loadsh
import lodash from "lodash";
interface dataList {
  name: string;
  value: string;
}
@Component
export default class EighteenBar extends Vue {
  @Prop({ default: () => [] })
  satisfy: Array<string> | undefined;
  @Prop({ default: () => [] })
  maxValue: Array<string> | undefined;
  private hours = ["12a"];
  private days = ["Saturday"];
  private data = [[0, 0, 1000]];
  public dataList: dataList[] = [
    {
      name: "满足",
      value: "40",
    },
    {
      name: "不满足",
      value: "30",
    },
  ];
  public option: object = {
    tooltip: {
      // trigger: "item",
      // axisPointer: {
      //   label:'111'
      // },
      // axisPointer: {
      //   type: "none",
      // },
      formatter: function (params: any) {
        // console.log("params:", params);
        return params.value[2];
      },
    },
    color: "#F89C27",
    // visualMap: {
    //     max: 20,
    //     inRange: {
    //         color: ['#F89C27']
    //     }
    // },
    xAxis3D: {
      type: "category",
      data: this.hours,
    },
    yAxis3D: {
      type: "category",
      data: this.days,
    },
    zAxis3D: {
      max: "1000",
      show: true,
      // type: 'false'
    },
    grid3D: {
      show: false,
      left: '0',
      top: "20%",
      boxWidth: 25,
      boxDepth: 20,
      viewControl: {
        // projection: 'orthographic'
      },
      light: {
        main: {
          intensity: 1.2,
          shadow: true,
        },
        ambient: {
          intensity: 0.3,
        },
      },
    },
    series: [
      {
        type: "bar3D",
        data: [{ value: [0, 0, 1000] }],
        shading: "lambert",
        label: {
          show: true,
          textStyle: {
            color: '#ffffff',
            fontSize: 16,
            // borderWidth: 1
            backgroundColor: "rgba(0,23,11,0)",
          },
        },

        emphasis: {
          label: {
            show: false,
            textStyle: {
              fontSize: 20,
              color: "#900",
            },
          },
          itemStyle: {
            color: "#F89C27",
            // opacity: 0
          },
        },
      },
    ],
  };
  $refs!: {
    homepagemapinfo: HTMLDivElement;
  };

  private myChart: any = {};
  public initmap(): void {
    this.myChart = echarts.init(this.$refs.homepagemapinfo);
    this.setOption();
  }

  @Watch("satisfy")
  setOption() {
    let option = lodash.cloneDeep(this.option);
    (option as any).zAxis3D.max = this.maxValue;
    (option as any).series[0].data[0].value = [0, 0, this.satisfy];
    // console.log(option);
    this.myChart.setOption(option);
  }

  private mounted(): void {
    this.initmap();
  }
}
</script>

<style lang="scss" scoped>
.eighteenbar {
  width: 100%;
  height: 100%;
  > div {
    width: 100%;
    height: 100%;
  }
  // display: flex;
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>